<template>
	<view class="">
		<view class="wd100  " style="position: fixed;top: 0;z-index: 999;">
			<view class="wd100 ">
				<u-subsection :list="taglist" :current="curNow" @change="sectionChange" active-color="#fff">
				</u-subsection>
			</view>
		</view>
		<view class="mt30">
			<scroll-list ref="list" :option="option" @load="load" @refresh="refresh">
				<view class="mlr30 pt20 " v-for="(item,index) in list" :key="index">
					<view class="flexR">
						<view class="wd15">
							<image class="tx br50" :src="item.user_img" mode=""></image>
						</view>
						<view class="ml10 wd85">
							<view class="flexC bb pb10	 fs28 flexauto">
								<view class=" dis-flex flex-align-center flex-between">
									<view class="ellipsis fw600">
										{{item.user_name}}
									</view>
									<view class="fs28 c-green" v-if="item.status == 2">
										已处理
									</view>
									<view class="fs28 c-red" v-else @click="gochuli(item.id)">
										去处理
									</view>
								</view>
								<view class="dis-flex flex-between flex-align-center c-999 mt5">
									<view class="fs26">联系方式：{{item.phone}}</view>
									<view class="fs24">时间：{{item.create_time | fengetime}}</view>
								</view>
							</view>
							<view class="mt10 fw600">问题描述：</view>
							<view class="mt10 mb10">{{item.content?item.content:'无'}}</view>
							<view class="flexR  flex-wrap">
								<image @click="yulan(item.imgs,index1)" class="tp  mr20 mb10"
									v-for="(item1,index1) in item.imgs" style="width: 130rpx;height: 100rpx;"
									:key="index1" :src="item1" mode=""></image>
							</view>
						</view>

					</view>

					<view class="xian"></view>
				</view>
			</scroll-list>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				taglist: [{
						name: '未处理'
					},
					{
						name: '已处理'
					}
				],
				curNow: 0,
				type: 1,
				list: [],
				page: 0,
				option: {
					size: 10,
					auto: true
				},
			}
		},
		onLoad(option) {
			uni.setNavigationBarTitle({
				title: "反馈列表"
			})
		},
		methods: {
			// 加载数据
			load(paging) {
				var that = this
				that.page = that.page + 1
				setTimeout(() => {
					var json = {
						page: that.page,
						tag:that.curNow+1
					}
					that.$http.post(that.$config.UrlPostfkList, json).then((res) => {
						if (res.status == 1) {
							var list = res.data.list
							if (list) {
								var totalDemo = that.list.concat(list);
								that.list = JSON.parse(JSON.stringify(totalDemo))
								that.$refs.list.loadSuccess({
									list: that.list,
									total: res.data.count
								});
							}
						}
					})

				}, that.$u.random(100, 1000));
			},
			refresh(){
				var that = this
				
				that.page = 1
				setTimeout(() => {
					var json = {
						page: that.page,
						tag:that.curNow+1
					}
					that.$http.post(that.$config.UrlPostfkList, json).then((res) => {
						if (res.status == 1) {
							var list = res.data.list
							that.list = []
							if (list) {
								var totalDemo = that.list.concat(list);
								that.list = JSON.parse(JSON.stringify(totalDemo))
								that.$refs.list.loadSuccess({
									list: that.list,
									total: res.data.count
								});
							}
						}
					})
				
				}, that.$u.random(100, 1000));
			},
			swit(e) {
				let index = e
				this.type = index
			},
			yulan(items, index) {
				this.$api.previewImage(index, items)
			},
			sectionChange(index) {
				this.curNow = index;
				this.refresh()
			},
			gochuli(id){
				var that = this
				that.$api.alertConfirm('确认反馈内容已经处理?',()=>{
					
					var json = {
						id: id,
					}
					that.$http.post(that.$config.UrlPostclFankui, json).then((res) => {
						if (res.status == 1) {
							that.refresh()
							that.$api.toast('处理成功')
						}
					})
					
					
				})
			}
		}
	}
</script>

<style scoped>
	.tp {
		height: 104rpx;
		width: 104rpx;
	}

	.xian {
		height: 3rpx;
		background-color: #ffffff;
	}

	page {
		background-color: #f6f8fc;
	}

	.tx {
		height: 84rpx;
		width: 84rpx;
	}

	.he {
		opacity: 1;
		background: #ffffff;
		border-radius: 20rpx;
		box-shadow: 3rpx 5rpx 13rpx 0rpx rgba(0, 0, 0, 0.2);
	}
</style>
